<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item
          ><div class="div1">基本配置</div></el-breadcrumb-item
        >
        <el-breadcrumb-item v-if="judge == 'judge'" :to="{ path: '/staffList' }"
          ><div class="div3">员工列表</div></el-breadcrumb-item
        >
        <el-breadcrumb-item
          ><div class="div2">员工信息</div></el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <!-- 面包屑导航 -->
    <!-- 内容 -->
    <div class="content">
      <p class="header">员工信息</p>
      <div class="form">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="登录名">
            <el-input maxlength="32" v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="中文名">
            <el-input maxlength="20" v-model="form.chineseName"></el-input>
          </el-form-item>
          <el-form-item label="用户密码" v-if="judge != 'judge'">
            <el-input maxlength="64" type="text" v-model="form.password"></el-input>
          </el-form-item>

          <el-form-item label="用户类型">
            <el-select
              v-model="form.perosalaType"
              placeholder="选择用户类型"
              clearable
            >
              <el-option
                v-for="items in userType"
                :key="items.dictId"
                :label="items.dictName"
                :value="items.dictId"
              ></el-option>
            </el-select>
          </el-form-item>

          <div class="staff">
            <el-form-item label="所属部门">
              <el-cascader
                v-model="form.staff_position"
                @change="handleChangeCader"
                :options="options"
                :props="{
                  checkStrictly: true,
                  label: 'orgName',
                  value: 'orgCode',
                  children: 'children',
                }"
                clearable
                filterable
              ></el-cascader>
            </el-form-item>

            <el-form-item label="职位">
              <el-select
                v-model="form.position"
                placeholder="选择职位类型"
                clearable
              >
                <el-option
                  v-for="items in selectType"
                  :key="items.id"
                  :label="items.positionName"
                  :value="items.positionCode"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="staff">
            <el-form-item label="数据权限">
              <el-select
                v-model="form.dataPermission"
                placeholder="选择用户的数据权限"
                clearable
              >
                <el-option
                  v-for="items in datalist"
                  :key="items.dictId"
                  :label="items.dictName"
                  :value="items.dictId"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="销售权限">
              <el-select
                v-model="form.staff"
                placeholder="请选择员工销售权限"
                clearable
              >
                <el-option
                  v-for="items in list"
                  :key="items.dictId"
                  :label="items.dictName"
                  :value="items.dictId"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <el-form-item label="手机号码">
            <el-input maxlength="20" v-model="form.phone"></el-input>
          </el-form-item>
          <el-form-item label="联系地址">
            <el-input maxlength="255" class="address" v-model="form.address"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addStaff()">保存</el-button>
            <el-button
              type="primary"
              v-if="!is_null(employeeId)"
              @click="limitsSelects"
              >添加权限</el-button
            >
          </el-form-item>
        </el-form>
        <!-- <div class="sumbit">保存</div> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: "",
        chineseName: "",
        staff: "", //销售权限
        staff_position: [], //所属部门
        phone: "",
        address: "",
        password: "",
        dataPermission: "", //数据权限
        position: "", //职位ID
        perosalaType: "", //用户类型
      },
      options: [],
      judge: "",
      list: [],
      props: {
        label: "orgName",
        value: "id",
        children: "children",
      },
      selectType: [],
      datalist: [],
      userType: [],
      content: "",
      employeeId: "",
    };
  },
  mounted() {
    this.judge = this.$route.query.judge;
    this.employeeId = this.$route.query.employeeId;
    this.staffDetail();
  },
  created() {
    this.department();
    this.salesScope();
    this.handleChange();
  },
  methods: {
    limitsSelects() {
      this.$router.push({
        name: "limitsSelects",
        query: {
          employeeId: this.employeeId,
          judge: this.judge,
          teamOrg: this.form.staff_position,
        },
      });
    },
    is_null(content) {
      if (
        content + "" != "" &&
        content + "" != "undefined" &&
        content + "" != "null" &&
        content + "" != "请选择"
      ) {
        return false;
      } else {
        return true;
      }
    },
    // 获取员工详情
    staffDetail() {
      if (this.employeeId != undefined) {
        this.axios
          .get("/sys/v1/user/employee/detail?employeeId=" + this.employeeId+"&winType="+JSON.parse(sessionStorage.getItem('userInfo')).winType)
          .then((res) => {
            // console.log("用户信息详情");
            // console.log(res)
            if (res.code == 0) {
              this.content = res.data;
              this.form = {
                name: this.content.username,
                chineseName: res.data.reallyName,
                staff: res.data.salesAuthorityId, //销售权限
                staff_position: res.data.orgCode, //所属部门
                phone: res.data.phoneNumber,
                address: res.data.contactAddress,
                password: "",
                dataPermission: res.data.dataPermission,
                position: this.content.positionCode,
                perosalaType: res.data.userType,
              };
            } else {
              this.$message.error(res.message);
            }
          });
      }
    },
    // 部门选择列表
    department() {
      this.axios
        .post(
          "/sys/v1/org/tree/select",
          {
            request: {
              orgName: "",
              orgType: "",
            },
            version: "",
          },
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            this.options = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    salesScope() {
      // 销售权限
      this.axios
        .get("/sys/v1/common/by/group?groupId=sales_authority", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            this.list = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
      // 数据权限
      this.axios
        .get("/sys/v1/common/by/group?groupId=data_permission", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          // console.log("数据权限");
          // console.log(res);
          if (res.code == 0) {
            this.datalist = res.data;
          } else {
            this.$message.error(res.message);
          }
        });

      // 用户类型
      this.axios
        .get("/sys/v1/common/by/group?groupId=user_category", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          //   console.log("用户类型");
          //   console.log(res);
          if (res.code == 0) {
            this.userType = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    handleChange() {
      this.axios
        .get("/sys/v1/position/list/select", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          // console.log("职位类型")
          // console.log(res)
          if (res.code == 0) {
            this.selectType = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    addStaff() {
      // console.log(this.form.staff_position)
      if (this.is_null(this.form.name)) {
        this.$message.warning("登录名不能为空");
      } else if (this.is_null(this.form.chineseName)) {
        this.$message.warning("中文名不能为空");
      } else if (this.is_null(this.form.perosalaType)) {
        this.$message.warning("用户类型不能为空哦");
      } else if (this.is_null(this.form.staff_position)) {
        this.$message.warning("部门归属不能为空哦");
      } else if (this.is_null(this.form.dataPermission)) {
        this.$message.warning("数据权限不能为空");
      } else if (this.is_null(this.form.phone)) {
        this.$message.warning("手机号码不能为空");
      } else if (this.is_null(this.form.address)) {
        this.$message.warning("联系地址不能为空");
      } else {
        if (this.employeeId == "" || this.employeeId == undefined) {
          if (this.is_null(this.form.password)) {
            this.$message.warning("联系地址不能为空");
          } else {
            this.axios
              .post(
                "/sys/v1/user/employee/add",
                {
                  request: {
                    avatarUrl: "",
                    contactAddress: this.form.address,
                    dataPermission: this.form.dataPermission,
                    orgCode: this.form.staff_position,
                    password: this.form.password,
                    phoneNumber: this.form.phone,
                    positionCode: this.form.position,
                    reallyName: this.form.chineseName,
                    salesAuthorityId: this.form.staff, //销售权限ID
                    userId: sessionStorage.getItem("user_id"),
                    username: this.form.name,
                    userCategory: this.form.perosalaType,
                  },
                  version: "",
                },
                {
                  headers: {
                    isLoading: false,
                  },
                }
              )
              .then((res) => {
                console.log(res);
                if (res.code == 0) {
                  this.$message.success("添加成功");
                  this.$router.push({ path: "/staffList" });
                } else {
                  this.$message.error(res.message);
                }
              });
          }
        } else {
          // 修改
          console.log(this.form.staff_position);
          this.axios
            .post(
              "/sys/v1/user/employee/update",
              {
                request: {
                  avatarUrl: "",
                  contactAddress: this.form.address,
                  // "menuButtonList": "",
                  dataPermission: this.form.dataPermission,
                  employeeId: this.employeeId,
                  orgCode: this.form.staff_position,
                  password: this.form.password,
                  phoneNumber: this.form.phone,
                  positionCode: this.form.position,
                  reallyName: this.form.chineseName,
                  salesAuthorityId: this.form.staff, //销售权限ID
                  userId: sessionStorage.getItem("user_id"),
                  username: this.form.name,
                  userCategory: this.form.perosalaType,
                },
                version: "",
              },
              {
                headers: {
                  isLoading: false,
                },
              }
            )
            .then((res) => {
              // console.log(res)
              if (res.code == 0) {
                this.$message.success("修改成功");
                this.$router.push({ path: "/staffList" });
              } else {
                this.$message.error(res.message);
              }
            });
        }
      }
    },
    handleChangeCader(value) {
      this.form.staff_position = value[value.length - 1];
    },
  },
};
</script>

<style scoped lang="scss">
.div1 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.div2 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}
.div3 {
  margin-left: -8px;
  background: url(../../../assets/breadcrumb3.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}
.header {
  font-size: 15px;
  color: #2d7edf;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.content {
  background: #fff;
  padding: 10px;
}
.form {
  margin-top: 40px;
  padding-left: 80px;
  /deep/.el-input__inner {
    width: 210px;
    height: 30px;
    background: #fff;
    color: #333;
  }

  /deep/ .el-cascader .el-input__inner {
    width: 400px !important;
  }

  .staff {
    .el-form-item {
      display: inline-block;
      margin-right: 20px;
    }
  }
  /deep/ .address .el-input__inner {
    width: 580px;
  }
}
.el-button {
  padding: 8px 10px;
  background: #0b7df3;
}
</style>
